<template>
  <view class="box">
    <dao title="售后详情" color="#fff" :left="true" />
    <!-- <quan v-if="true" /> -->

   <view class="sdsdax">
    <uni-forms :label-width="90"
        :border="true"
        ref="valiForm"
        :rules="rules"
        :modelValue="arr"
      >
    <view  class="bosdf">

            

<view style="color: #000;">
    <view style="font-size:34rpx; display: flex;align-items: center;"> 
      <image style="width: 40rpx;
  height: 40rpx;" src="../../static/个人.png" >
    
  </image>申请信息</view>

<view style="margin-top:20rpx">

<view class="sdsds">店名：{{ arr.StoreName }}</view>
<view class="sdsds">姓名：{{ arr.ContactName }}</view>
<view class="sdsds">电话：{{ arr.ContactPhone }}</view>
<view class="sdsds">所在地区：{{ arr.StoreAddress }}</view>
<view class="sdsds">详细地址：{{ arr.StoreDetailAddress }}</view>


<view class="sdsds">设备铭牌照片：
  <!-- <uv-album :urls="arr.IotIDTagFilepath" multipleSize="128rpx" space="8rpx"></uv-album> -->
  <view style="width: 400rpx;">
		<uv-album singleSize="128rpx" v-if="arr.IotIDTagFilepath.length" :urls="arr.IotIDTagFilepath" multipleSize="128rpx" space="8rpx"></uv-album>
	</view>
</view>
<view class="sdsds">故障描述：{{ arr.IotIDFaultDescription }}</view>
<view v-if="images.length" class="sdsds" ><uv-album
   :urls="images" multipleSize="128rpx" singleSize="128rpx" space="8rpx"></uv-album>
  </view>



<view style="margin-top: 30rpx;">
  <video v-if="videos.length"
  style="width:280rpx"
  id="myVideo"
  :src="videos[0]"
  controls

></video>
</view>



</view>
</view>

            </view>

 <view class="bosdf">
  <view style="color: #000;">
    <view  style="font-size:34rpx; display: flex;align-items: center;color: #000;"> 
      <image style="width: 35rpx;
  height: 35rpx;" src="../../static/记录.png" >
    
  </image>售后信息</view>

  <view style="margin-top:20rpx">

<view class="sdsds">工单号：{{ arr.Number }}</view>

<uni-forms-item label="是否在保:"  name="IsWarranty">
          <uni-data-select
        v-model="arr.IsWarranty"
        :localdata="range"
       
      ></uni-data-select>
</uni-forms-item>
<uni-forms-item label="工单状态:"  name="Status">
          <uni-data-select
        v-model="arr.Status"
        :localdata="ranges"
       
      ></uni-data-select>
</uni-forms-item>
<!-- <view>是否在保：{{ arr.IsWarranty }}</view> -->


  </view>





</view>

 </view>


 <view class="bosdf">
  <view style="color: #000;">
    <view  style="font-size:34rpx; display: flex;align-items: center;color: #000;"> 
      <image style="width: 35rpx;
  height: 35rpx;" src="../../static/维修.png" >
    
  </image>维修信息</view>

  <view style="margin-top:20rpx">

 <view class="sdsdsddc">
  <uni-forms-item   name="MalfunctionReason">
  <view class="example-body">
            <view class="sdsds"> 故障原因：  
    </view>
		
 
			</view>
  <uni-easyinput maxlength="100" type="textarea" v-model="arr.MalfunctionReason"
   placeholder="请输入故障原因" />

<view style="display: flex;">

   
</view>
</uni-forms-item>
  <uni-forms-item   name="Suggestions">
  <view class="example-body">
            <view class="sdsds"> 维修建议：  
    </view>
		
 
			</view>
  <uni-easyinput maxlength="150" type="textarea" v-model="arr.Suggestions"
   placeholder="请输入维修建议" />

<view style="display: flex;">
  <upload v-if="bu"  :ddarr="arr.SuggestionsFilepath"
    @updeteData="SuggestionsFilepathupdeteData"
     :maxCount="6"
    :uploadText="tilv"

    
    />
   
</view>
</uni-forms-item>
 </view>





  </view>





</view>

 </view>

    </uni-forms>
    <view class="bosdfs">
      <button 
    
     
    style="border: 0;width: 100%;" :plain="true"
  :disabled="ddds"
     class="brn" 
     @click="submit">

    提交
    </button>

    </view>
  
     <view style="height: 46rpx;"></view>


   </view>
  </view>
</template>

<script setup >

import {getxsshoude,xinzengsshouhou} from '../../api/login'
import upload from '../../components/upload.vue'
import dao from "../../pages/conpments/daohang.vue";
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
import {
    onLoad,
    onShow,onHide
  } from "@dcloudio/uni-app";

import { useCounterStore } from "../../stores/counter";
import {
  ref,
  onMounted,
  inject,
  getCurrentInstance,
  reactive,
  computed,
} from "vue";
const arr=ref({
  "Number": "",
  "IotID": '',
  "IotIDTagFilepath":[],
  "IotIDFaultDescription": "",
  "IotIDFaultDescriptionFilepath": [],
  "StoreName": "",
  "StoreAddress": "",
  "StoreDetailAddress": "",
  "ContactName": "",
  "ContactPhone": "",
  "IsWarranty": "",
  "Status": "",
  "Suggestions": "",
  MalfunctionReason:'',
  SuggestionsFilepath:[]
})
let tilv =ref('上传图片')
const SuggestionsFilepathupdeteData=(e)=>{
  arr.value.SuggestionsFilepath=e.map(item=>item.url)
 if(!arr.value.SuggestionsFilepath.length){
  tilv.value='上传图片'

 }else{
  tilv.value='还可上传'+(6-arr.value.SuggestionsFilepath.length)+'张'

 }
}
const  rules={
    myname:{
      rules: [
        {
          required: true,
          errorMessage: "姓名不能为空",
        },
      
      ],
    },
    introduction:{
      rules: [
        {
          required: true,
          errorMessage: "故障描述不能为空",
        },
      
      ],
    },
    weixu:{
      rules: [
        {
          required: true,
          errorMessage: "项目不能为空",
        },
      
      ],
    },
    // mingpai:{
    //   rules: [
    //     {
    //       required: true,
    //       errorMessage: "铭牌不能为空",
    //     },
      
    //   ],
    // },
    name: {
      rules: [
        {
          required: true,
          errorMessage: "店名不能为空",
        },
      
      ],
    },
    detail: {
      rules: [
        {
          required: true,
          errorMessage: "详细地址不能为空",
        },
       
      ],
    },
    address: {
      rules: [
        {
          required: true,
          errorMessage: "区域不能为空",
        },
       
      ],
    },
    phone: {
      rules: [
        {
          required: true,
          errorMessage: "手机号不能为空",
        },
        {
          pattern: /^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/,
          errorMessage: "手机号格式有误！",
        },
      ],
    },
  }
  const ddds=ref(false)
  const valiForm = ref(null);
  const submit = () => {
  valiForm
    .value.validate()
    .then((res) => {
      console.log("success", res);
      delete arr.value.CreatedAt
      delete arr.value.UpdatedAt
      delete arr.value.DeletedAt
      ddds.value=true
      xinzengsshouhou(arr.value).then((res) => {

uni.showToast({
      title: `提交成功！`,
      duration:1000,
      success:()=>{
setTimeout(()=>{
  ddds.value=false
  uni.navigateBack({
  delta: 1,
});
},1000)
      }
    });

      })


// xinzengshouhou(aa).then((result) => {console.log(res);})

      // uni.navigateTo({
      //   url: "/pages/my/Reset/index",
      // });
    })
    .catch((err) => {
      console.log("err", err);
    });
};


  const  range= [
          { value: '是', text: "是" },
          { value: '否', text: "否" },
        ]

        const  ranges= [
          { value: '待审核', text: "待审核" },
          { value: '处理中', text: "处理中" },
          { value: '已完结', text: "已完结" },

        ]
onShow(async ()=>{


})
const videos =ref([]);
const images = ref([]);
const bu=ref(false)
onLoad(async (option)=>{
console.log(option.id);
  const {data}= await getxsshoude(option.id)
  arr.value=data.data
  bu.value=true
//  arr.value.IotIDTagFilepath=arr.value.IotIDTagFilepath
if(arr.value.IotIDFaultDescriptionFilepath.length){
  
  // 遍历文件URL列表
  arr.value.IotIDFaultDescriptionFilepath.forEach(url => {
  // 获取文件的后缀名（从最后一个点开始到字符串结束）
  const extension = url.split('.').pop().toLowerCase();
  // 根据后缀名将文件放入相应的数组
  if (['mp4', 'avi', 'mov', 'webm', 'mkv'].includes(extension)) {
    videos.value.push(url);
  } else if (['jpg', 'png', 'gif', 'jpeg', 'bmp'].includes(extension)) {
    images.value.push(url);
  }
  // 如果需要支持更多格式，可以在上面的数组中添加相应的后缀名
});
}

 


})


</script>

<style scoped lang="scss">
.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
.ferf{text-align: right;

color: #606266;}

.sdsdax{

width: 100%;
margin-top:20rpx;
padding-top: 20rpx;
height: calc(100vh - 222rpx);
overflow-y: scroll;
box-sizing: border-box;
}





.box {
  height: 50vh;
  background: linear-gradient(
    180deg,
    $uni-primary 0%,
    rgba(216, 237, 232, 0.43) 61.6%,
    rgba(217, 217, 217, 0) 100%
  );
}


.sdsds{
  line-height: 60rpx;
}
.bosdfs{
  margin: 15px;
}
.bosdf{
  margin: 15px;
  font-size: 28rpx !important;
    padding:  10px;
    background: #fff;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
}
:deep(.uni-forms-item){margin-bottom: 10rpx;}
:deep(.uni-forms-item__label){
  font-size: 28rpx !important;
  color:#000;
}

.sdsdsddc :deep(.uni-forms-item__label){
  width: 0 !important;
}

::v-deep .brn {
  margin-top: 20rpx;
  width: 100%;
  border-radius: 50rpx;
  color: #fff;
  background-image: linear-gradient(to right, #53c4ff, #40a3ff, #3383fe);

}:deep(.is-input-border){
  border: 0 !important;
}
</style>